<template>
    <div>
        <div class="avatar">
            <!-- <div class="avatar_box">
                <div> <el-avatar :size="65" :src="avatar"></el-avatar></div>
                <div class="a_txt">
                    <div style="margin-bottom: 11px;">{{ user }}</div>
                    <div>{{ phone }}</div>
                </div>
            </div> -->
            <div class="top_txts">认证中心</div>
            <div class="my_top_box">
                <div class="avatar_box" @click="openMyDia('xinmeiti')">
                    <div class="a_txt">
                        <div class="a_txt_top">新媒体认证</div>
                        <div class="a_txt_top2">认证完成后可对授权内容进行分发传播</div>
                    </div>
                    <div style="padding-left: 151px;padding-right: 20px;"> <img :size="49" width="49" height="49"
                            :src="media"></img>
                    </div>
                </div>
                <div class="avatar_box" @click="openMyDia('chuangzuozhe')">
                    <div class="a_txt">
                        <div class="a_txt_top">医普号认证</div>
                        <div class="a_txt_top2">认证完成后可进行发布原创内容</div>
                    </div>
                    <div style="padding-left: 203px;"> <img :size="49" width="49" height="49" :src="kepu"></img></div>
                </div>
                <div class="avatar_box" @click="openMyDia('shenhezhe')">
                    <div class="a_txt">
                        <div class="a_txt_top">审核者认证</div>
                        <div class="a_txt_top2">认证完成后可进行 审核原创内容</div>
                    </div>
                    <div style="padding-left: 203px;"> <img :size="49" width="49" height="49" :src="shenhe"></img></div>
                </div>
            </div>

        </div>
        <div class="dialog" v-if="checkRole(['ordinaryUser', 'common'])">
            <el-dialog title="新媒体认证" center width="1100px" :visible.sync="xinmeiti" style="my_tabs_back">
                <mediaUser @closeDia="closeDia" :openHandle="xinmeiti"></mediaUser>
            </el-dialog>

            <el-dialog title="医普号认证" class="global-dialog" center width="1100px" :visible.sync="chuangzuozhe"
                :append-to-body="false" :style="{ overflowY: 'auto' }">
                <el-tabs v-model="activeName" @tab-click="handleClick" class="my_tabs">
                    <el-tab-pane label="个人资料认证" name="first">
                        <makerUser @closeDia="closeDia" :openHandle="chuangzuozhe"></makerUser>
                    </el-tab-pane>
                    <el-tab-pane label="机构资料认证" name="second">
                        <jigou @closeDia="closeDia" :openHandle="chuangzuozhe"></jigou>
                    </el-tab-pane>
                </el-tabs>
            </el-dialog>

            <el-dialog title="审核者认证" center width="1100px" :visible.sync="shenhezhe">
                <shenheUser @closeDia="closeDia" :openHandle="shenhezhe"></shenheUser>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import mediaUser from '@/views/user/components/pop/media'
import makerUser from '@/views/user/components/pop/maker'
import shenheUser from '@/views/user/components/pop/shenhe'
import jigou from '@/views/user/components/pop/jigou'
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
export default {
    components: { mediaUser, makerUser, jigou, shenheUser },
    name: '',
    data() {
        return {
            circleUrl: require('@/assets/images/profile.jpg'),
            media: require('@/assets/images/top1.png'),
            kepu: require('@/assets/images/top2.png'),
            shenhe: require('@/assets/images/top3.png'),
            user: '',
            xinmeiti: false,
            chuangzuozhe: false,
            shenhezhe: false,
            activeName: 'first',
        }
    },
    created() {
        this.getRoles()
    },
    mounted() {
        if (this.$store.state.user.info.examineStatus.toString() == '0') {
            //  this.$notify.error({ title: '提示', message: '审核中请勿提交' })
            return
        }
        setTimeout(() => {
            this.chuangzuozhe = true;
        }, 500);
    },
    methods: {
        openMyDia(type) {
            if (this.$store.state.user.info.examineStatus.toString() == '0') {
                this.$notify.error({ title: '提示', message: '审核中请勿提交' })
                return
            }
            if (type == 'xinmeiti') this.xinmeiti = true
            if (type == 'chuangzuozhe') this.chuangzuozhe = true
            if (type == 'shenhezhe') this.shenhezhe = true
        },
        closeDia(obj) {
            if (obj.name == 'chuangzuozhe') {
                this.chuangzuozhe = obj.isClose
            }
            if (obj.name == 'xinmeiti') {
                this.xinmeiti = obj.isClose
            }
            if (obj.name == 'shenhezhe') {
                this.shenhezhe = obj.isClose
            }
        },
        async getRoles() {
            this.user = await this.$store.dispatch('userRole')
        },
        handleClick(tab, event) {
            if (tab.name == 'first') {

                console.log('个人资料认证');
            }
            if (tab.name == 'second') {
                console.log('机构资料认证');
            }
            //console.log(tab, event);
        },
        checkPermi,
        checkRole,
    },
    computed: {
        phone() {
            return this.$store.state.user.phone.slice(0, 3) + '****' + this.$store.state.user.phone.slice(7, 11)
        },
        avatar() {
            return this.$store.state.user.avatar
        }
    }

}
</script>

<style lang="scss"></style>

<style lang='scss' scoped>
.global-dialog {
    ::v-deep .el-dialog__body {
        max-height: calc(100vh - 300px);
        overflow: auto;
    }
}

.avatar {
    display: flex;
    flex-direction: column;
    // padding-right: 20px;

    cursor: pointer;

    .top_txts {
        font-size: 20px;
        color: #333333;
        line-height: 23px;
        font-weight: bold;
        padding-left: 30px;
        padding-top: 30px;
        margin-bottom: 20px;
    }

    .my_top_box {
        display: flex;
        margin-bottom: 20px;
    }

    .avatar_box:nth-child(1) {
        width: 533px;
        //height: 93px;
        display: flex;
        // align-items: center;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        color: #3D3D3D;
        line-height: 22px;
        padding: 20px 0 10px 20px;
        margin-left: 20px;
        border-radius: 15px;
        background: #FFF9F1;

        // margin-bottom: 20px;
        .a_txt {
            display: flex;
            flex-direction: column;

            // padding-left: -10px;
            .a_txt_top {
                font-size: 18px;
                color: #333333;
                line-height: 21px;
            }

            .a_txt_top2 {
                margin-top: 10px;
                font-size: 16px;
                color: #999999;
                line-height: 19px;
                width: 280px;
            }
        }
    }

    .avatar_box:nth-child(2) {
        width: 533px;
        //  height: 93px;
        display: flex;
        // align-items: center;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        color: #3D3D3D;
        line-height: 22px;
        padding: 20px 0 10px 20px;
        margin-left: 20px;
        border-radius: 15px;
        background: #F5F9FF;

        .a_txt {
            display: flex;
            flex-direction: column;

            // padding-left: -10px;
            .a_txt_top {
                font-size: 18px;
                color: #333333;
                line-height: 21px;
            }

            .a_txt_top2 {
                margin-top: 10px;
                font-size: 16px;
                color: #999999;
                line-height: 19px;
                width: 230px;
            }
        }
    }

    .avatar_box:nth-child(3) {
        width: 533px;
        //  height: 93px;
        display: flex;
        // align-items: center;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        color: #3D3D3D;
        line-height: 22px;
        padding: 20px 0 10px 20px;
        margin-left: 20px;
        border-radius: 15px;
        background: #F7F3FF;

        .a_txt {
            display: flex;
            flex-direction: column;

            // padding-left: -10px;
            .a_txt_top {
                font-size: 18px;
                color: #333333;
                line-height: 21px;
            }

            .a_txt_top2 {
                margin-top: 10px;
                font-size: 16px;
                color: #999999;
                line-height: 19px;
                width: 230px;
            }
        }
    }

    .avatar_box:nth-child(4) {
        width: 344px;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 700;
        color: #3D3D3D;
        line-height: 22px;
        padding: 20px 0 63px 80px;

        .a_txt {
            display: flex;
            flex-direction: column;
            margin-right: 32px;
        }
    }

}

.dialog {
    .my_tabs {
        ::v-deep .el-tabs__header {
            display: flex;
            justify-content: center;
        }
    }
}
</style>